<template>
  <div>
    <h1>首页内容部分 => 版本0.0.1</h1>
    <el-button type="danger" @click="getUserList">请求数据</el-button>
    <el-button type="primary" @click="getUserList">请求数据</el-button>
    <el-button type="success" @click="getUserList">请求数据</el-button>
    <el-button type="info" @click="getUserList">请求数据</el-button>
    <br>
    <span v-for="item in userList">{{ item }}</span>
    <h1> --------------- </h1>
    <span v-for="item in list" :key="item.id" :data-id="item.id">{{ item.name }}</span>
    <h1> --------------- </h1>
    <span v-for="item in userList1">{{ item }}</span>
  </div>
</template>

<script setup lang="ts">
import server from "~/utils/httpService";

interface User {
  id: number;
  name: string;
  age: number;
  create_by: string;
  create_time: string;
  update_by: string;
  update_time: string;
}

const userList = ref<string[]>([]);
const userList1 = ref<string[]>([]);
const list = ref<User[]>([]);

const {data} = await server.get<string[]>("/zyApi/user/list2", undefined, { key: "user-list2" });
if (data.value) {
  userList.value = data.value.data;
}

const { data: data1 } = await server.get<User[]>("/api/user", undefined, {key: "data-user"});
if (data1.value) {
  list.value = data1.value.data;
}

const getUserList = async () => {
  ElMessage.success("已发送");
  const { data: data2 } = await server.get<string[]>("/zyApi/user/list1", undefined, {key: "user-list1"});
  if (data2.value) {
    userList1.value = data2.value.data;
  }
};
</script>

<style scoped>
span {
  display: inline-block;
  margin: 4px;
  padding: 5px;
  background-color: #FF9500;
  border-radius: 4px;
}
</style>